MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール

MarkdownをPDFに綺麗にいい感じに出力したい…!と探し回っていたところ、「md-to-pdf」が最も私の要件に合致したので使ってみました。
Clock Icon2019.10.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Markdown to PDF

Markdownで書きたいけど、PDFで出力したい という機会はエンジニアはよく出くわすと思います。

「Markdown to PDF」といえばGitBook CLIが有名ですが、こちらはメンテナンスがストップされているため推奨されません(環境依存による不具合などが解決されない)。

GitBookほど多機能でなくても良いですが、綺麗にいい感じに出力したい…!と探し回っていたところ md-to-pdf が最も私の要件に合致したので使ってみました。

そんな私の要件はこちら。

  • CLIから出力したい
  • ページ内リンクが作れる
  • ページ分割ができる
  • ページ数表示が簡単にできる
  • 全体に対して簡単にテーマをCSSで適用できる
  • いざという時にはHTML+CSSでカスタマイズができる

それに対して md-to-pdf は以下のような機能があります。

  • ディレクトリ内のMarkdownファイルを全て一気にPDFに変換する
  • Watchモード
  • CSSをWebまたはローカルから適用
  • ファイルの先頭で数多くの設定が可能
  • ヘッダーとフッターの設定
  • ページ分割
  • シンタックスハイライト
  • 他のツールを用いた拡張
  • プログラマティックなAPI

またレンダリングにはHeadless ChromiumであるPuppeteerを使っており、表示上の問題がより起こらなそうな印象です。

使い方

使い方はいたって簡単です。

まず npm module として提供されているので yarn init などで package.json を作成後、以下のコマンドでインストールします。

$ yarn add md-to-pdf

あとは同じディレクトリにMarkdownファイルを置けば、PDFに変換できます。

以下のコマンドを実行するだけです。

$ npx md-to-pdf
 ✔ generating PDF from Example.md

Example.md というファイルを置けば Example.pdf が作成されます。

複数のファイルも一気に出力

例えば複数のファイルが存在する場合も、

Example1.md
Example2.md
Example3.md

一発です!

$ npx md-to-pdf
  ✔ generating PDF from Example1.md
  ✔ generating PDF from Example2.md
  ✔ generating PDF from Example3.md

ヘッダーとフッター

以下をMarkdownファイルの先頭に記載すると、ヘッダーとフッターを加えることができます。

---
pdf_options:
  format: A4
  margin: 30mm 20mm
  displayHeaderFooter: true
  headerTemplate: |-
    <style>
      section {
        margin: 0 auto;
        font-family: system-ui;
        font-size: 11px;
      }
    </style>
    <section>
      <span class="date"></span>
    </section>
  footerTemplate: |-
    <section>
      <div>
        Page <span class="pageNumber"></span>
        of <span class="totalPages"></span>
      </div>
    </section>
---

設定したテンプレート通りに書き出されます。

スタイル調整

GitHub風にしたい場合は以下をMarkdownファイルの先頭に記載します。

---
stylesheet: https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css
body_class: markdown-body
---

いい感じですね!

ページ内リンク

以下のような感じで記載すると、ページ内でリンクすることができます。

## TOC

- [TOC](#toc)
- [aaa](#aaa)
- [bbb](#bbb)
- [ccc](#ccc)

## aaa

## bbb

## ccc

もちろんPDF上でもちゃんと動きます。

綺麗にサクッと出力したい場合におすすめ!

md-to-pdfはサクッと試すことができ、また柔軟性もあって非常に便利なツールだと思います。ぜひ試してみてください!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.